<template>
  <div class="select-location">
    <div class="hd">张华
      <div class="department">产品规划部</div>
      <span>5-012</span>
    </div>
    <div class="main" :style="{height: 'calc(100% - '+reduceHeight+'rem)'}">
      <div class="wrapper" ref="wrapper">
        <div class="box" :style="{width: innerWidth * scale+'px',height:boxH * scale+'px'}">
          <img class="bg" src="../../assets/icon/floor_5.png">
          <div
            class="station-item"
            v-for="(item,index) of data"
            :key="index"
            :class="{active:item.isClick && item.type === 1,no_select: item.type === 2,select:!item.isClick && item.type === 1,
            up: item.origin === 'up',down: item.origin === 'down',left: item.origin === 'left',right: item.origin === 'right'}"
            :style="{width: item.w * scale+'px',height:item.h * scale+'px',left:item.l *scale + 'px',top: item.t * scale+ 'px'}"
            @click="handleClick(index)"
          >
            <div
              class="station-num"
              :style="{transform: 'translateX(-50%) scale('+scale/2+')' }"
            >{{item.stationNo}}</div>
          </div>
        </div>
      </div>
      <div class="scale">
        <img class="increase" @click="increase" src="../../assets/icon/enlarge.png">
        <img @click="reduce" src="../../assets/icon/narrow.png">
      </div>
    </div>

    <div class="pos">
      <div class="icon-list" v-show="!selectList.length">
        <div class="icon-box">
          <img src="../../assets/icon/select.png">
          可选工位
        </div>
        <div class="icon-box">
          <img src="../../assets/icon/no_select.png">
          不可选工位
        </div>
        <div class="icon-box">
          <img src="../../assets/icon/selected.png">
          已选工位
        </div>
      </div>
      <div class="station-box" v-show="selectList.length">
        <p class="station-title">已选工位</p>
        <ul class="station-list">
          <li v-for="(item,index) in selectList" :key="index">
            {{item.stationNo}}
            <img src="../../assets/icon/del.png">
          </li>
        </ul>
      </div>
      <yd-button
        size="large"
        type="primary"
        class="btn-blue"
        @click.native="confirm"
        :disabled="!selectList.length"
      >{{selectList.length?'确认工位':'请选工位'}}</yd-button>
    </div>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
import util from '@/util/util'
export default {
  name: 'StationInfo',
  data() {
    return {
      scrollX: 0,
      scrollY: 0,
      scale: 1,
      innerWidth: null,
      innerHeight: null,
      initBoxW: 375,
      initBoxH: 1357.75,
      reduceHeight: 2.94, // 单位rem
      boxH: null,
      unlock: true,
      data: [
        {
          l: '46',
          t: '227.5',
          w: '27.5',
          h: '27.5',
          origin: 'up',
          type: 1, // 1可选2不可选
          stationNo: '5-001',
          isClick: false
        },
        {
          l: '46',
          t: '255',
          w: '27.5',
          h: '27.5',
          type: 1,
          origin: 'down',
          stationNo: '5-002',
          isClick: false
        },
        {
          l: '46',
          t: '282.5',
          w: '27.5',
          h: '27.5',
          type: 2,
          origin: 'up',
          stationNo: '5-004',
          isClick: false
        },
        {
          l: '46',
          t: '310',
          w: '27.5',
          h: '27.5',
          type: 2,
          origin: 'down',
          stationNo: '5-005',
          isClick: false
        }
      ],
      selectList: []
    }
  },
  methods: {
    increase() {
      this.scale = 2
      this.unlock = false
      this.scroll.refresh()
      setTimeout(() => {
        this.unlock = true
        this.scrollX = (this.innerWidth * 2) / 4
        if (this.scrollY > 0) {
          this.scrollY = this.scrollY + (this.boxH * 2) / 4
        } else {
          this.scrollY =
            this.scrollY +
            (this.innerHeight - util.remConvertToPx(this.reduceHeight)) / 2
        }
        this.scroll.scrollTo(-this.scrollX, -this.scrollY, 100)
      }, 100)
    },
    reduce() {
      this.scale = 1
      this.unlock = false
      this.scroll.refresh()
      setTimeout(() => {
        this.unlock = true
        this.scrollX = 0
        if (
          this.scrollY >
          (this.boxH -
            (this.innerHeight - util.remConvertToPx(this.reduceHeight))) /
            2
        ) {
          this.scrollY = this.scrollY - (this.boxH * 2) / 4
        } else {
          this.scrollY =
            this.scrollY -
            (this.boxH -
              (this.innerHeight - util.remConvertToPx(this.reduceHeight))) /
              2
        }
        this.scroll.scrollTo(-this.scrollX, -this.scrollY, 100)
      }, 100)
    },
    initScroll() {
      this.scroll = new BScroll(this.$refs.wrapper, {
        scrollX: true,
        scrollY: true,
        probeType: 3, // 探针，获取滑动距离必备
        click: true
      })
      this.scroll.on('beforeScrollStart', () => {
        if (!this.unlock) return
        this.scroll.on('scroll', pos => {
          this.scrollX = Math.abs(Math.round(pos.x))
          this.scrollY = Math.abs(Math.round(pos.y))
        })
      })
    },
    handleClick(index) {
      const item = this.data[index]
      if (item.type === 2) return
      item.isClick = !item.isClick
      this.$set(this.data, index, item)
    }
  },
  watch: {
    data: {
      handler(val) {
        this.selectList = val.filter(item => item.isClick)
        if (this.selectList.length) {
          this.reduceHeight = 3.9
        } else {
          this.reduceHeight = 2.94
        }
        this.scroll.refresh()
      },
      deep: true
    }
  },
  created() {
    this.innerWidth = document.body.clientWidth
    this.innerHeight = document.body.clientHeight
    this.boxH = this.innerWidth * (this.initBoxH / this.initBoxW)
  },
  activated() {
    this.initScroll()
  }
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl';
.select-location
  height: 100%;
  .hd
    line-height: 0.9rem;
    background: $white;
    font-size: 0.28rem;
    padding: 0 0.28rem 0 0.32rem;
    color: $darkText;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    .department
      display: inline-block;
      font-size: 0.24rem;
      margin-left: 0.2rem;
    span
      float: right;
  .main
    width: 100%;
    margin: 0 auto;
    position: relative;
    .wrapper
      width: 100%;
      height: 100%;
      overflow: hidden;
  .scale
    position: absolute;
    bottom: 0.28rem;
    right: 0.1rem;
    img
      width: 0.72rem;
      height: auto;
      display: block;
      &.increase
        margin-bottom: 0.3rem;
  .box
    position: relative;
    width: 100%;
    .bg
      width: 100%;
      height: auto;
      display: block;
  .station-item
    position: absolute;
    text-align: center;
    .station-num
      width: 1.1rem;
      height: 0.5rem;
      line-height: 0.56rem;
      position: absolute;
      overflow-wrap: break-word;
      white-space: nowrap;
      font-size: 0.233rem;
    &.up
      .station-num
        left: 50%;
        transform: translateX(-50%) scale(0.5);
        bottom: 0;
        transform-origin: center bottom;
    &.down
      .station-num
        top: 0;
        left: 50%;
        transform: translateX(-50%) scale(0.5);
        transform-origin: center top;
    &.no_select
      color: $lightGray;
      &.up
        background: url('../../assets/icon/no_select_bg_up.png') no-repeat;
        background-size: cover;
      &.down
        background: url('../../assets/icon/no_select_bg_down.png') no-repeat;
        background-size: cover;
    &.select
      color: #C4C4C4;
      &.up
        background: url('../../assets/icon/select_bg_up.png') no-repeat;
        background-size: cover;
      &.down
        background: url('../../assets/icon/select_bg_down.png') no-repeat;
        background-size: cover;
    &.active
      color: $white;
      &.up
        background: url('../../assets/icon/selected_bg_up.png') no-repeat;
        background-size: cover;
  .pos
    background: $white;
    box-sizing: border-box;
    padding-bottom: 0.2rem;
    .icon-list
      overflow: hidden;
      display: flex;
      justify-content: center;
      padding: 0.22rem 0 0.2rem;
      .icon-box
        color: $lightGray;
        font-size: 0.2rem;
        margin-right: 0.24rem;
        line-height: 0.48rem;
        img
          width: 0.48rem;
          height: 0.48rem;
          margin: -0.06rem 0.08rem 0 0;
    .station-box
      padding: 0 0.32rem 0.32rem 0.38rem;
      font-size: 0.26rem;
      color: #333;
      .station-title
        line-height: 0.89rem;
        font-weight: bold;
      .station-list
        overflow: hidden;
        li
          float: left;
          width: 1.8rem;
          border-radius: 5px;
          padding: 0 0.24rem;
          height: 0.66rem;
          line-height: 0.66rem;
          border: 1px solid #E7E7E7;
          margin-right: 0.16rem;
          position: relative;
          img
            width: 0.2rem;
            height: 0.2rem;
            display: block;
            position: absolute;
            right: 0.24rem;
            top: 50%;
            transform: translateY(-50%);
</style>
